<template>
  <div class="layout">
    <el-form label-width="120px" ref="formRef" :model="formData" :rules="formRules" :disabled="props.pageType == 'look'">
      <el-form-item label="红包金额" prop="red_envelope_money">
        <el-input-number
          v-model="formData.red_envelope_money"
          :controls="false"
          :precision="2"
          :min="0.3"
          :max="200"
          placeholder="请输入红包总金额"
          class="adorn"
          @blur="onProbability(formData.red_envelope_money, formData.first_value, formData.help_money_value)"
        ></el-input-number
        ><span>元</span>
        <div class="money">金额在0.3-200之间</div>
      </el-form-item>
      <el-form-item label="客户首拆金额：" class="mt_t">
        <el-radio-group v-model="formData.first_type" @change="onRadio">
          <el-radio :label="1">固定金额</el-radio>
          <el-radio :label="2">随机金额</el-radio>
          <el-radio :label="3">随机比例</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="first_value" v-if="formData.first_type == 1">
        <el-input-number v-model="formData.first_value[0]" :controls="false" :precision="2" placeholder="请输入金额" class="adorn" @blur="onFirst(formData.first_value)"></el-input-number><span>元</span>
      </el-form-item>
      <el-form-item v-if="formData.first_type == 2" prop="first_value">
        <el-input-number v-model="formData.first_value[0]" placeholder="请输入金额" class="split" @blur="onFirst(formData.first_value)" :controls="false" :precision="2"> </el-input-number><span>元---</span>
        <el-input-number v-model="formData.first_value[1]" @blur="onFirst(formData.first_value)" placeholder="请输入金额" class="split" :controls="false" :precision="2"></el-input-number><span>元</span>
      </el-form-item>
      <el-form-item v-if="formData.first_type == 3" prop="first_value">
        <el-input-number v-model="formData.first_value[0]" placeholder="请输入比例" class="split" @blur="onFirst(formData.first_value)" :controls="false"> </el-input-number><span>%---</span>
        <el-input-number v-model="formData.first_value[1]" @blur="onFirst(formData.first_value)" placeholder="请输入比例" class="split" :controls="false"></el-input-number><span>%</span>
      </el-form-item>
      <el-form-item label="助力人数：" prop="help_num">
        <el-input-number oninput="value=value.replace(/[^\d]/g,'')" @blur="onNum" :controls="false" :precision="0" v-model="formData.help_num" placeholder="请输入助力人数" class="adorn"></el-input-number><span>人</span>
      </el-form-item>
      <el-form-item label="助力拆金额：" class="mt_t">
        <el-radio-group v-model="formData.help_money_type" @change="onRadios">
          <el-radio :label="1">固定金额</el-radio>
          <el-radio :label="2">随机金额</el-radio>
          <el-radio :label="3">随机比例</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="help_money_value" v-if="formData.help_money_type == 1">
        <el-input-number :controls="false" :precision="2" @blur="onHelpMoney(formData.help_money_value)" v-model="formData.help_money_value[0]" placeholder="请输入金额" class="adorn"></el-input-number><span>元</span>
      </el-form-item>
      <el-form-item v-if="formData.help_money_type == 2" prop="help_money_value">
        <el-input-number @blur="onHelpMoney(formData.help_money_value)" v-model="formData.help_money_value[0]" :controls="false" :precision="2" placeholder="请输入金额" class="split"></el-input-number><span>元---</span>
        <el-input-number @blur="onHelpMoney(formData.help_money_value)" v-model="formData.help_money_value[1]" :controls="false" :precision="2" placeholder="请输入金额" class="split"></el-input-number><span>元</span>
      </el-form-item>
      <el-form-item v-if="formData.help_money_type == 3" prop="help_money_value">
        <el-input-number @blur="onHelpMoney(formData.help_money_value)" v-model="formData.help_money_value[0]" :controls="false" placeholder="请输入比例" class="split"></el-input-number><span>%---</span>
        <el-input-number @blur="onHelpMoney(formData.help_money_value)" v-model="formData.help_money_value[1]" :controls="false" placeholder="请输入比例" class="split"></el-input-number><span>%</span>
      </el-form-item>
      <el-form-item label="活动次数：" prop="fission_num"> <el-input-number :controls="false" :precision="0" @blur="onActivity" v-model="formData.fission_num" placeholder="请输入次数" class="adorn"></el-input-number><span>次</span> </el-form-item>
      <el-form-item label="活动总金额：" prop="red_envelope_total" class="mt_t">
        <span>{{ formData.red_envelope_total }}元</span>
      </el-form-item>
    </el-form>
  </div>

  <TPDialog ref="TPDialogRef" @submit="onInfo"></TPDialog>
</template>

<script setup lang="ts">
  import { ref, defineExpose, defineProps, computed, watch } from 'vue'
  import { ElMessage, FormInstance, UploadProps } from 'element-plus'
  import { Picture as IconPicture } from '@element-plus/icons-vue'
  import { getMarketinGroupgList } from '@/api/smartMarketing/group'
  import TPDialog from '@/components/TPDialog.vue'
  const emit = defineEmits(['submit'])
  const TPDialogRef: any = ref(null)
  const formRef: any = ref(null)
  const props = defineProps<{
    pageType: {
      type: string
    }
  }>()
  const formData = ref({
    red_envelope_money: 0, //红包金额
    first_type: 1, //首拆类型 1-固定 2-随机金额 3-随机比例
    first_value: [0, 0], //值 固定[1] 随机金额比例 [2,3]
    help_num: 1, //助力人数
    help_money_type: 1, //助力拆金额类型 1-固定 2-随机金额 3-随机比例
    help_money_value: [0, 0], //值 固定[1] 随机金额比例 [2,3]
    fission_num: 1, //裂变次数
    red_envelope_total: 0 //活动总金额
  })

  const publicInfo = ref({})
  const onInfo = (val: any) => {
    console.log(val)

    formData.value.official_account_id = val.id
    publicInfo.value = val
  }
  const groupOptions = ref([])
  const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
  }
  getMarketinGroupgList({ type: 13, name: '' }).then((res: any) => {
    groupOptions.value = res.data
  })
  formData.value.red_envelope_total = computed(() => {
    return (formData?.value?.red_envelope_money * formData?.value?.fission_num).toFixed(2)
  })

  const onFirst = (v: any) => {
    if (formData.value.first_type == 1) {
      if (Number(v[0]) <= 0 || Number(v[0]) >= formData.value.red_envelope_money) {
        ElMessage.error(`首拆金额必须大于0且小于${formData.value.red_envelope_money}`)
        formData.value.first_value = ['']
      }
    }
    if (formData.value.first_type == 2) {
      if (Number(v[0]) <= 0 || Number(v[1]) >= formData.value.red_envelope_money) {
        ElMessage.error(`首拆金额必须大于0且小于${formData.value.red_envelope_money}`)
        formData.value.first_value = ['', '']
      }
    }
    if (formData.value.first_type == 3) {
      if (v[0] <= 0 || v[1] >= 100) {
        ElMessage.error(`首拆金额必须大于0%且小于100%`)
        formData.value.first_value = ['', '']
      }
      // if ((Number(v[0]) * formData.value.red_envelope_money) / 100 < 0.3 || (Number(v[0]) * formData.value.red_envelope_money) / 100 < 0.3) {
      //   ElMessage.error(`首拆金额必须大于0.3元`)
      //   formData.value.first_value = ['', '']
      // }
    }
  }
  const onHelpMoney = (v: any) => {
    if (formData.value.help_money_type == 1) {
      if (Number(v[0]) <= 0 || Number(v[0]) >= formData.value.red_envelope_money) {
        ElMessage.error(`助力拆金额必须大于0且小于${formData.value.red_envelope_money}`)
        formData.value.help_money_value = ['']
      }
    }
    if (formData.value.help_money_type == 2) {
      if (Number(v[0]) <= 0 || Number(v[1]) >= formData.value.red_envelope_money) {
        ElMessage.error(`助力拆金额必须大于0且小于${formData.value.red_envelope_money}`)
        formData.value.help_money_value = ['', '']
      }
    }
    if (formData.value.help_money_type == 3) {
      if (v[0] <= 0 || v[1] >= 100) {
        ElMessage.error(`助力拆金额必须大于0%且小于100%`)
        formData.value.help_money_value = ['', '']
      }
      // if ((Number(v[0]) * formData.value.help_money_value) / 100 < 0.3 || (Number(v[0]) * formData.value.help_money_value) / 100 < 0.3) {
      //   ElMessage.error(`助理拆金额必须大于0.3元`)
      //   formData.value.first_value = ['', '']
      // }
    }
  }
  const onProbability = (val: any, cudis: any, hdis: any) => {
    if (val < 0.3 || val > 200) {
      ElMessage.error('红包金额必须在0.3-200之间')
      formData.value.red_envelope_money = 0
    }
    if (formData.value.first_value[0] !== 0 || formData.value.first_value[1] !== 0) {
      onFirst(cudis)
    }
    if (formData.value.help_money_value[0] !== 0 || formData.value.help_money_value[1] !== 0) {
      onHelpMoney(hdis)
    }
  }
  // 校验数组不能为空
  const firstAmountValidator = (rule: any, value: any, callback: any) => {
    console.log('value: ', value)
    if (!value[0]) {
      callback(new Error('首拆金额不能为空或0'))
    }
    if (formData.value.first_type == 2 || formData.value.first_type == 3) {
      if (value[0] > value[1]) {
        callback(new Error('首拆金额范围不正确'))
      }
    }
    callback()
  }
  const helpmoneyAmountValidator = (rule: any, value: any, callback: any) => {
    if (!value[0]) {
      callback(new Error('首拆金额不能为空或0'))
    }
    if (formData.value.help_money_type == 2 || formData.value.help_money_type == 3) {
      if (value[0] > value[1]) {
        callback(new Error('助力拆金额范围不正确'))
      }
    }
    callback()
  }
  const amountValidator = (rule, value, callback) => {
    if (value < 0.3 || value > 200) {
      callback(new Error('金额在 0.3-200之间'))
    } else {
      callback()
    }
  }
  const totalMoney = (rule, value, callback) => {
    if (+value > 100000) {
      callback(new Error('红包总金额不得超过10万元'))
    } else {
      callback()
    }
  }
  const formRules = {
    red_envelope_money: [
      { required: true, message: '请输入红包金额', trigger: 'blur' },
      { validator: amountValidator, trigger: 'blur' }
    ],
    help_num: [{ required: true, message: '请输入助力人数', trigger: 'blur' }],
    fission_num: [{ required: true, message: '请输入活动次数', trigger: 'blur' }],
    period_type: [{ required: true, message: '请选择活动有效期类型', trigger: 'change' }],
    first_value: [
      { required: true, message: '首拆金额不能为空', trigger: 'blur' },
      { validator: firstAmountValidator, trigger: 'blur' }
    ],
    help_money_value: [
      { required: true, message: '助力拆金额不能为空', trigger: 'blur' },
      { validator: helpmoneyAmountValidator, trigger: 'blur' }
    ],
    red_envelope_total: [{ validator: totalMoney, trigger: 'blur' }]
  }

  const onNum = () => {
    if (formData.value.help_num < 1) {
      ElMessage.error('助力人数不能小于0或者等于0')
      formData.value.help_num = ''
    }
  }
  const onActivity = () => {
    if (formData.value.fission_num < 1) {
      ElMessage.error('活动次数不能小于0或者等于0')
      formData.value.fission_num = ''
    }
  }
  const onRadio = (v: any) => {
    formData.value.first_value = [0, 0]
  }
  const onRadios = () => {
    formData.value.help_money_value = [0, 0]
  }
  watch(
    formData,
    (val) => {
      emit('submit', val)
    },
    { deep: true }
  )
  const setComputed = () => {
    formData.value.red_envelope_total = computed(() => {
      return (formData?.value?.red_envelope_money * formData?.value?.fission_num).toFixed(2)
    })
  }
  defineExpose({
    formData,
    formRef,
    publicInfo,
    setComputed
  })
</script>

<style lang="scss" scoped>
  .layout {
    .adorn {
      width: 190px;
      display: inline-block;
      margin-right: 10px;
    }
    .money {
      color: #969696;
      font-size: 14px;
      margin-top: 10px;
      line-height: 14px;
    }
    .split {
      width: 105px;
      margin-right: 10px;
    }
  }

  .official_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
    border: 1px solid #eaeaea;
    border-radius: 1px;
    cursor: pointer;
    color: #ccc;
    font-size: 45px;
    .official_text {
      font-size: 14px;
      color: #000000d1;
    }
  }
  .official_box2 {
    display: flex;
    cursor: pointer;
    &:hover {
      background: #f5f5f5;
    }

    .left {
      margin-right: 10px;
      .el-icon {
        font-size: 60px;
      }
    }
    .right {
      color: #ff5b11;
      text-align-last: left;
      .right_h3 {
        font-weight: 700;
      }
    }
  }
  .el-form-item {
    margin-bottom: 24px;
  }
  .mt_t {
    margin-bottom: -5px;
    margin-top: -14px
  }
</style>
